<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Friend Pets</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
	<script src="http://connect.facebook.net/en_US/all.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="scripts/global.js" type="text/javascript"></script>
  </head>
  <body>
  	<div id="Facebook_btn">
		<fb:login-button autologoutlink="true"></fb:login-button>
	</div>  
	<div id="fb-root"></div>
	<div id="content_container">
		<!-- 
		<section id="instruction_container">
			<p>Hi Welcome to Friend Pets!</p>
			<p>1. Add your pets by selecting them at the bottom<br/>
			2. Feed your pet to raise the hunger level<br/>
			3. Torturing your pet will decrease the loyalty level<br/>
			4. When your pet's hunger or loyalty level is zero, the pet will leave you! 
			</p>
		</section> -->
		<section id="profile_container">
			<div id="img_profile"></div>
			<div id="txt_profile"></div>
			<div id="txt_petinfo">Ranking: 0001<br/>Pets: 2</div>
		</section>
		<section id="pets_container">
			<div>Your Pets:</div>
			<div id="pet_container">
				<div class="pet_item">
					<div>
						<img src="images/male_char.png" width="100px"/>
					</div>
					<div class="pet_info">
						<strong>David Huang</strong><br/>
						Sex: M<br/>
						Loyalty: 99<br/>
						Hunger: 99<br/>
						<a href="#">Feed</a>
						<a href="#">Punch</a>
						<a href="#">Delete</a>
					</div>
				</div>
				<div class="pet_item">
					<div>
						<img src="images/male_char.png" width="100px"/>
					</div>
					<div class="pet_info">
						<strong>Alex Li</strong><br/>
						Sex: M<br/>
						Loyalty: 99<br/>
						Hunger: 99<br/>
						<a href="#">Feed</a>
						<a href="#">Punch</a>
						<a href="#">Delete</a>
					</div>
				</div>
			</div>
		</section>
		<section id="friends_container">
			<div id="lbl_friend">
				<label>Friends: </label>
				<input id="box_search" type="text" name="search" value="Start typing friends name"/>
			</div>
			<div id="btn_left"><img src="images/left_arrow.png" /></div>
			<div id="friend_container">
				<div id="friends"></div>
			</div>
			<div id="btn_right"><img src="images/right_arrow.png" /></div>
		</section>
	</div>
	<script src="scripts/common.js" type="text/javascript"></script>
  </body>
</html>
